@model GeneratePageModel

<!-- =================================== Prompt Feature Modals =================================== -->

@WebUtil.ModalHeader("text_prompt_segment_modal", "Add Prompt Syntax: Auto-Segment And Refine")
    <div class="modal-body">
        <span class="translate">
            This Prompt-Syntax feature lets you add a region to the image that will be automatically detected after generation, and then automatically inpainted with a given prompt.
            <br>A common example use case here is when generating an image of a person, use this feature to automatically refine the face (this is sometimes called 'ADetailer').
            <br>By default this uses CLIPSeg, which automatically masks the region based on a text prompt. You can instead use a YOLOv8 model.
            <br>Learn more about this feature here:
        </span>
        <a href="https://github.com/mcmonkeyprojects/SwarmUI/blob/master/docs/Features/Prompt%20Syntax.md#automatic-segmentation-and-refining" target="_blank" rel="noreferrer noopener" class="translate">[Swarm Docs: Prompt Syntax - Automatic Segmentation and Refining]</a>
        <span class="translate">
            <br>Note that there are also advanced options in the parameters menu, under Display Advanced -&gt; Regional Prompting.
        </span>
        <hr>
        <div id="text_prompt_segment_other_inputs"></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#text_prompt_segment_modal').modal('hide')">Cancel</button>
        <button type="button" class="btn btn-primary basic-button translate" onclick="promptPlusButton.segmentModalSubmit()">Add</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("text_prompt_region_modal", "Add Prompt Syntax: Regional Prompt")
    <div class="modal-body">
        <span class="translate">
            This Prompt-Syntax feature lets you define simple regions of an image that will receive a different prompt from the rest of the image while generation.
            <br>Optionally, you can also auto-inpaint the region after to refine it further.
            <br>Note that you may add a syntax feature of <code>&lt;region:background&gt;</code> to your prompt to also set a prompt for the background only to use.
            <br>Learn more about this feature here:
        </span>
        <a href="https://github.com/mcmonkeyprojects/SwarmUI/blob/master/docs/Features/Prompt%20Syntax.md#regional-prompting" target="_blank" rel="noreferrer noopener" class="translate">[Swarm Docs: Prompt Syntax - Regional Prompting]</a>
        <span class="translate">
            <br>Note that there are also advanced options in the parameters menu, under Display Advanced -&gt; Regional Prompting.
        </span>
        <hr>
        <div id="text_prompt_region_canvasholder">
        </div>
        <div id="text_prompt_region_other_inputs"></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#text_prompt_region_modal').modal('hide')">Cancel</button>
        <button type="button" class="btn btn-primary basic-button translate" onclick="promptPlusButton.regionModalSubmit()">Add</button>
    </div>
@WebUtil.ModalFooter()

<!-- =================================== Installer Modals =================================== -->

@WebUtil.ModalHeader("gen_previews_missing_preset_modal", "Missing Preview Preset")
    <div class="modal-body">
        To generate previews properly, please create a Preset and title it exactly "Preview"
        <br>It is recommended that this preset be configured to use a fast-generation method such as LCM or Turbo.
        <br>Your preset named exactly "Preview" will automatically be used when generating previews, and ignored when you click Generate to generate a full image.
        <br><div id="gen_previews_autobutton"></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary basic-button translate" onclick="toggleGeneratePreviews(true);$('#gen_previews_missing_preset_modal').modal('hide')">Start Anyway</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#gen_previews_missing_preset_modal').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("sam2_installer", "Install SAM2")
    <div class="modal-body">
        Full image auto-segmentation is made available via Segment-Anything-2 created by Meta AI (Apache 2 License), and ComfyUI nodepack for it created by kijai (Apache 2 License).
        <br>
        <br>When used, it will generate an autosegmentation of the current image and provide the result as a layer in the image editor.
        <br>You can then use the paintbucket tool to fill mask with sections you want, then delete or hide the segment layer.
    </div>
    <div class="modal-footer" id="install_sam2_button">
        <button type="button" class="btn btn-primary basic-button translate" onclick="installFeatureById('sam2', 'install_sam2_button', 'sam2_installer')">Install</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#sam2_installer').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("bnb_nf4_installer", "Install BnB NF4 Support")
    <div class="modal-body">
        The model you're trying to use appears to be a Bits-and-Bytes NF4 format model.
        <br>
        <br>This requires an extension released by silveroxides, comfyanonymous, and lllyasviel (AGPL license) to run. Would you like to install it?
    </div>
    <div class="modal-footer" id="install_bnbnf4_button">
        <button type="button" class="btn btn-primary basic-button translate" onclick="installFeatureById('bnb_nf4', 'install_bnbnf4_button', 'bnb_nf4_installer')">Install</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#bnb_nf4_installer').modal('hide');localStorage.setItem('hide_bnb_nf4_check', 'true')">No and don't show again</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#bnb_nf4_installer').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("nunchaku_installer", "Install Nunchaku Support")
    <div class="modal-body">
        The model you're trying to use appears to be a Nunchaku SVDQuant format model.
        <br>
        <br>This requires an extension released by MIT Han Lab (Apache2 license) to run. Would you like to install it?
    </div>
    <div class="modal-footer" id="install_nunchaku_button">
        <button type="button" class="btn btn-primary basic-button translate" onclick="installFeatureById('nunchaku', 'install_nunchaku_button', 'nunchaku_installer')">Install</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#nunchaku_installer').modal('hide');localStorage.setItem('hide_nunchaku_check', 'true')">No and don't show again</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#nunchaku_installer').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("gguf_installer", "Install GGUF Support")
    <div class="modal-body">
        The model you're trying to use appears to be a GGUF format model.
        <br>
        <br>This requires an extension released by city96 to run. Would you like to install it?
    </div>
    <div class="modal-footer" id="install_gguf_button">
        <button type="button" class="btn btn-primary basic-button translate" onclick="installFeatureById('gguf', 'install_gguf_button', 'gguf_installer')">Install</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#gguf_installer').modal('hide');localStorage.setItem('hide_gguf_check', 'true')">No and don't show again</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#gguf_installer').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("extramodels_installer", "Install City96-ExtraModels Support")
    <div class="modal-body">
        The model you're trying to use appears to be a model class that requires the Comfy extension City96-ExtraModels to work.
        <br>
        <br>Would you like to install it?
    </div>
    <div class="modal-footer" id="install_extramodels_button">
        <button type="button" class="btn btn-primary basic-button translate" onclick="installFeatureById('extramodels', 'install_extramodels_button', 'extramodels_installer')">Install</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#extramodels_installer').modal('hide');localStorage.setItem('hide_extramodels_check', 'true')">No and don't show again</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#extramodels_installer').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()

<!-- =================================== Model Modals =================================== -->

@WebUtil.ModalHeader("edit_model_modal", """Edit Model Metadata: <input type="text" class="modal_text_extra" id="edit_model_name" placeholder="Model Name" />""")
    <div class="modal-body">
        <div><span id="edit_model_technical_data"></span></div>
        <hr>
        <div>Load from civitai: <input type="text" id="edit_model_civitai_url" class="auto-text translate" placeholder="Civitai URL (or blank to use hash)" title="Civitai URL (or blank to use hash)" autocomplete="off" /> <button type="button" class="btn btn-primary basic-button translate small-button" onclick="edit_model_load_civitai()">Load</button>
        <div id="edit_model_civitai_info"></div></div>
        <div>Author: <input type="text" id="edit_model_author" class="modal_text_extra translate" placeholder="Model Author" /></div>
        <div>Architecture: <select id="edit_model_type" class="modal_text_extra" placeholder="Model Type">
            @foreach (T2IModelClass arch in T2IModelClassSorter.ModelClasses.Values.OrderBy(x => x.ID))
            {
                <option value="@arch.ID" class="translate">@arch.Name</option>
            }
        </select></div>
        <div>Prediction Type: <select id="edit_model_prediction_type" class="modal_text_extra translate" placeholder="Model Type">
            <option value="">Unspecified</option><option value="v">V-Prediction</option><option value="epsilon">Epsilon</option><option value="x0">x0</option><option value="lcm">LCM</option><option value="v-zsnr">VPred ZSNR</option><option value="sd3">SD3 (Rectified Flow)</option>
        </select></div>
        <div>Standard Resolution: <input type="text" id="edit_model_resolution" class="modal_text_extra translate" placeholder="Resolution, eg 1024x1024" /></div>
        <div>License: <input type="text" id="edit_model_license" class="modal_text_extra translate" placeholder="Model License" /></div>
        <div>Date: <input type="text" id="edit_model_date" class="modal_text_extra translate" placeholder="Model Date" /></div>
        <div>Merged From: <input type="text" id="edit_model_merged_from" class="modal_text_extra translate" placeholder="Model Merged From" /></div>
        <div>Tags: <input type="text" id="edit_model_tags" class="modal_text_extra translate" placeholder="Model Tags" /></div>
        <div>Usage Hint: <input type="text" id="edit_model_usage_hint" class="modal_text_extra translate" placeholder="Model Usage Hint" /></div>
        <div>Trigger Phrase: <input type="text" id="edit_model_trigger_phrase" class="modal_text_extra translate" placeholder="Model Trigger Phrase" /></div>
        <div id="edit_model_is_negative_div">Is Negative Embedding: <span class="form-check form-switch display-inline-block"><input type="checkbox" id="edit_model_is_negative" class="slider-toggle form-check-input" title="If checked, embedding is for Negative Prompts. Otherwise, for the main prompt." /></span></div>
        <div id="edit_model_lora_default_weight_div">Default LoRA Weight: <input type="number" min="-10" max="10" step="0.05" id="edit_model_lora_default_weight" class="modal_text_extra translate" placeholder="Default LoRA Weight" /></div>
        <div id="edit_model_lora_default_confinement_div">Default LoRA Confinement: <select id="edit_model_lora_default_confinement" class="modal_text_extra translate" placeholder="Default LoRA Confinement">
            <option value="0">Global</option>
            <option value="5">Base</option>
            <option value="1">Refiner</option>
            <option value="2">Video</option>
            <option value="3">VideoSwap</option>
        </select></div>
        Description: <textarea class="auto-text auto-text-block translate" id="edit_model_description" rows="3" placeholder="Model description text..."></textarea>
        <div>Linked Preset: <select id="edit_model_preset_id" class="modal_text_extra"></select></div>
        <div id="edit_model_image_block"></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary basic-button translate" onclick="save_edit_model()">Save</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#edit_model_modal').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("edit_wildcard_modal", """Edit Wildcard: <input type="text" class="modal_text_extra" id="edit_wildcard_name" placeholder="Wildcard Name" />""")
    <div class="modal-body">
        <p class="translate">Wildcards are lists of random prompt segments. One entry per line. Prompt sub-syntax is allowed (eg you can link another wildcard, or use <code>&lt;random:...&gt;</code>, or <code>&lt;preset:...&gt;</code> or anything else you want).</p>
        <p class="translate">Prefix a line with <code>#</code> to make it a comment (ie won't be counted as an option).</p>
        <p>Use Experimental Editor? <input type="checkbox" id="edit_wildcard_experimental_editor" onchange="wildcardHelpers.toggleExperimentalEditor()" /></p>
        <div id="edit_wildcard_editor_spot"></div>
        <div id="edit_wildcard_image_block"></div>
    </div>
    <div class="modal-footer">
    <span id="edit_wildcard_modal_error" class="modal_error_bottom"></span>
        <button type="button" class="btn btn-primary basic-button translate" onclick="wildcardHelpers.saveEditWildcard()">Save</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#edit_wildcard_modal').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("test_wildcard_modal", """Test Wildcard: <span id="test_wildcard_name"></span>""")
    <div class="modal-body">
        Result: <textarea class="auto-text auto-text-block" id="test_wildcard_result" rows="3" placeholder="Result here..."></textarea>
    </div>
    <div class="modal-footer">
        <button type="button" id="test_wildcard_again_button" class="btn btn-primary basic-button translate" onclick="wildcardHelpers.testWildcardAgain()">Test Again</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#test_wildcard_modal').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("delete_model_modal", """Delete Model: <span id="delete_model_name"></span>""")
    <div class="modal-body">
        <span class="translate">Are you sure you want to delete this model?</span>
        <br><i class="translate">This cannot be undone. The whole model will be gone until you re-download it.</i>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary basic-button translate" onclick="doDeleteModelNow()">Delete Now</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#delete_model_modal').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("rename_model_modal", """Rename Model: <span id="rename_model_name"></span>""")
    <div class="modal-body">
        <span class="translate">Rename the model:</span>
        <br><i class="translate">This will move the model file and any attached files to a different sub-folder, within the same models path.</i>
        <br>@WebUtil.TextPopoverButton("modelrenamedownloaderfolder", "What folder to put the model in.\nTo create new folders, simply type paths with '/' in them into the 'Save as:' name box below.") <b>Folder</b>: <select class="auto-dropdown" id="model_rename_downloader_folder" autocomplete="off"></select>
        <br>
        <br>@WebUtil.TextPopoverButton("modelrenamedownloadersaveas", "File name to save as. Don't include the '.safetensors' file extension, just the name.\nYou can use a folder path with the '/' symbol.") <b>New name</b>: <input type="text" id="model_rename_downloader_name" class="auto-text auto-text-wide" placeholder="Model Name" autocomplete="off" oninput="modelRenameNameInput()" />
        <br>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary basic-button translate" onclick="doRenameModelNow()">Rename Now</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#rename_model_modal').modal('hide')">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("create_tensorrt_modal", """Create TensorRT Engine""")
    <div id="tensorrt_mustinstall" style="display:none;">
        <div class="modal-body">
            <p class="translate">TensorRT support is not yet installed. You must install it to continue.</p>
            <div id="install_trt_button">
                <button type="button" class="btn btn-primary basic-button translate" onclick="installTensorRT()">Install TensorRT</button>
            </div>
        </div>
    </div>
    <div id="tensorrt_modal_ready">
        <div class="modal-body">
            <div class="translate hoverable-minor-hint-text">
                TensorRT is an NVIDIA-specific optimization library. This will create a ".engine" TensorRT model based on your model.
                <br>This will take several minutes to create, and will only work with a limited subset of inputs.
                <br>(For example, LoRA will not work, and resolution is constrained to the range you select).
                <br>Therefore this should only be used for models you want to use frequently, especially for example models exposed as an external API.
            </div>
            Model: <select class="auto-dropdown" id="tensorrt_model_select"></select>
            <br>Preferred Aspect Ratio: <select class="auto-dropdown" id="tensorrt_aspect_ratio">
                <option selected="">1:1</option>
                <option>4:3</option><option>3:2</option><option>8:5</option><option>16:9</option><option>21:9</option>
                <option>3:4</option><option>2:3</option><option>5:8</option><option>9:16</option><option>9:21</option>
            </select>
            <br>Aspect Ratio Range Limit: <select class="auto-dropdown" id="tensorrt_aspect_range">
                <option>Exact</option><option selected="">2x</option><option>4x</option>
            </select>
            <br>Preferred Batch Size: <input type="number" class="auto-number" id="tensorrt_batch_size" value="1" min="1" max="64" />
            <br>Max Batch Size: <input type="number" class="auto-number" id="tensorrt_max_batch_size" value="4" min="1" max="64" />
            <div id="tensorrt_create_result_box">
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" id="trt_create_button" class="btn btn-primary basic-button translate" onclick="trt_modal_create()">Create</button>
            <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#create_tensorrt_modal').modal('hide')">Cancel</button>
        </div>
    </div>
@WebUtil.ModalFooter()

<!-- =================================== Preset Modals =================================== -->

@WebUtil.ModalHeader("export_presets_modal", "Export Presets")
    <div class="modal-body">
        <h5>Format:</h5>
        <div class="btn-group" role="group">
            <input type="radio" class="btn-check" name="btnradio" id="export_preset_format_json" autocomplete="off" checked="" onchange="exportPresetsButton(true)">
            <label class="btn btn-outline-primary translate" for="export_preset_format_json">SwarmUI JSON</label>
            <input type="radio" class="btn-check" name="btnradio" id="export_preset_format_csv" autocomplete="off" onchange="exportPresetsButton(true)">
            <label class="btn btn-outline-primary translate" for="export_preset_format_csv">Prompt only CSV</label>
        </div>
        <br><br>
        <textarea id="export_presets_textarea" style="width: calc(max(500px, 50vw));" rows="10" disabled autocomplete="off"></textarea>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary basic-button translate" onclick="exportPresetsDownload()">Download</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="closeExportPresetViewer()">Close</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("import_presets_modal", "Import Presets")
    <div class="modal-body">
        <div id="import_preset_upload_container">
            <input type="file" id="import_preset_uploader" oninput="importPresetUpload()" /> &nbsp;<label for="import_preset_uploader" class="translate">Upload Preset File (JSON or CSV)</label>
            <textarea id="import_presets_textarea" style="width: calc(max(500px, 50vw));" rows="10" oninput="importPresetsCheck()"></textarea>
        </div>
        <span class="form-check form-switch display-inline-block">
            <input type="checkbox" class="form-check-input" id="import_presets_overwrite" onchange="importPresetsCheck()"> <label class="form-check-label translate" for="import_presets_overwrite">Overwrite existing presets</label>
        </span>
    </div>
    <div class="modal-footer">
        <span id="import_preset_modal_error" class="modal_error_bottom"></span>
        <button type="button" class="btn btn-primary basic-button translate" id="import_presets_activate_button" onclick="importPresetsActivate()" disabled autocomplete="off">Import</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="closeImportPresetViewer()">Cancel</button>
    </div>
@WebUtil.ModalFooter()
@WebUtil.ModalHeader("add_preset_modal", """<span id="new_preset_modal_title">Create New Preset</span>: <input type="text" id="new_preset_name" placeholder="Preset Name" />""")
    <div class="modal-body">
        <textarea class="auto-text auto-text-block translate" id="preset_description" rows="3" placeholder="Preset description text..."></textarea>
        <div id="new_preset_image_block"></div>
        <hr>
        <h5 class="translate">Parameters in the Preset</h5>
        <p class="translate">Select the checkbox next to inputs you want included in the preset.<br>By default this will override values entirely. For text inputs, use <code>{value}</code> to include the current UI value instead of overriding.</p>
        <div id="new_preset_modal_inputs"></div>
        <div class="advanced_input_checkbox advanced_input_checkbox_presets">
            <input type="checkbox" id="preset_advanced_options_checkbox" onclick="preset_toggle_advanced()"/>
            <span class="translate" onclick="preset_toggle_advanced_checkbox_manual()">Display Advanced Options?</span>
        </div>
        <div id="new_preset_modal_advanced_inputs" style="display:none;"></div>
        <div class="advanced_input_checkbox advanced_input_checkbox_presets">
            <input type="checkbox" id="preset_hidden_options_checkbox" onclick="preset_toggle_hidden()"/>
            <span class="translate" onclick="preset_toggle_hidden_checkbox_manual()">Display Normally-Hidden Options?</span>
        </div>
        <div id="new_preset_modal_hidden_inputs" style="display:none;"></div>
    </div>
    <div class="modal-footer">
        <span id="new_preset_modal_error" class="modal_error_bottom"></span>
        <button type="button" class="btn btn-primary basic-button translate" onclick="save_new_preset()">Save</button>
        <button type="button" class="btn btn-secondary basic-button translate" onclick="close_create_new_preset()">Cancel</button>
    </div>
@WebUtil.ModalFooter()
